<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<link rel="stylesheet" href="">
</head>
<body>
<script src="http://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<div id="app">
	<router-link to='/foo/bar'>/foo/bar</router-link>
	<div>
		<router-view></router-view>
	</div>
</div>
<script>
	const Foo = {
		template:`<div>Foo {{$route.params.name}}</div>`,
	}
	const Bar = {
		template : `<div>Bar {{$route.params.name}}</div>`
	}
	const router = new VueRouter({
		routes : [
			{ path:'/foo' ,component : Foo, name : 'foo', children : [
				{
					path : 'bar',
					component : Bar,
					name : 'bar',
					meta : { requiresAuth : true },
					params : { name : 'Ken' } 
				}
			] }
		],
	});
	// router.beforeEach((to, from, next) => {
	// 	console.log(to);
	// 	console.log(from);
	//   if (to.matched.some(record => record.meta.requiresAuth)) {
	//     // this route requires auth, check if logged in
	//     // if not, redirect to login page.
	//     if (!auth.loggedIn()) {
	//       next({
	//         path: '/login',
	//         query: { redirect: to.fullPath }
	//       })
	//     } else {
	//       next()
	//     }
	//   } else {
	//     next() // 确保一定要调用 next()
	//   }
	// })
	/**
	 * [vm description]
	 * @type {Vue}
	 * 首先，我们称呼 routes 配置中的每个路由对象为 路由记录。路由记
	 * 录可以是嵌套的，因此，当一个路由匹配成功后，他可能匹配多个路由
	 * 记录例如，根据上面的路由配置，/foo/bar 这个 URL 
	 * 将会匹配父路由记录以及子路由记录。
	 * 一个路由匹配到的所有路由记录会暴露为 $route 
	 * 对象（还有在导航守卫中的路有对象）的 $route.matched 
	 * 数组。因此，我们需要遍历 $route.matched 来检查路由记录中的 
	 * meta 字段。
	 */
	const vm = new Vue({
		el : '#app',
		router,
		data : {}
	})
</script>	
</body>
</html>